<template>
    <Card
        class="hr-list__room__card"
        :padding="5">

        <p slot="title" style="width:calc(100% - 150px)">{{room.cRoomName}}</p>

        <div slot="extra">
            <span v-if="room && room.leases.length" style="margin-right:10px">
                {{ room.cTenantInfo }}
            </span>
            <template v-else>
                <i-button
                    v-if="!isFullRenting"
                    type="primary"
                    size="small"
                    style="padding:4px 12px;"
                    @click="checkInVisible = true">
                    租客入住
                </i-button>
            </template>
            <i-button type="primary" size="small" style="padding:4px 12px;" @click="openRoom">管理</i-button>
        </div>

        <device-list :room="room" :home-id="home.id"></device-list>

        <CheckIn
            v-if="checkInVisible"
            :home="home"
            :room="room"
            @cancelCheckIn="checkInVisible = false"
            @checkInSuccess="handleRefreshRoom"
        />
    </Card>
</template>

<script>
    /**
     * 房间列表的房间卡片
     * 适用于分散式房源公区/普通房间 和 集中式普通房间
     */
    import bus from '@/libs/event-bus'
import { refreshRoom } from './util'
import deviceList from './device-list'
import CheckIn from '../../renter/renterCheckIn'

export default {
      name: 'room-card',
      components: {
        CheckIn,
        deviceList
      },
      props: {
        home: Object,
        room: Object
      },
      data () {
        return {
          checkInVisible: false
        }
      },
      computed: {
        isFullRenting () {
          return this.home && this.home.lease_type === 2
        }
      },
      methods: {
        openRoom () {
          // 传播到 homeDetail.vue
          bus.$emit('open-room' + this.home.id, this.room)
        },
        handleRefreshRoom () {
          refreshRoom(this.home.id, this.room.id)
        }
      }
    }
</script>

